<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>时间轴</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <style>
      body {
        background-image: linear-gradient(to right, #fdf1d8, #b2bcf9);
      }

      .time-axis {
        /* 对齐中轴边框线宽度 */
        width: 804px;
        /* height: 700px; */
        /* border: 2px solid #f00; */
        margin: 51px auto 59px;
      }

      .clearFix::after {
        content: "";
        display: block;
        clear: both;
      }

      .time-axis .left {
        width: 400px;
        /* height: 300px; */
        /* background-color: aqua; */
        float: left;
        border-right: 4px solid #b1bbf9;
        position: relative;
      }

      .time-axis .right {
        width: 400px;
        /* height: 300px; */
        /* background-color: aquamarine; */
        float: right;
        border-left: 4px solid #b1bbf9;
        position: relative;
      }

      .time-axis .dot {
        width: 10px;
        height: 10px;
        border-radius: 7px;
        border: 2px solid #b1bbf9;
        background-color: #fff;
        display: block;
        position: absolute;
        top: 50%;
        margin-top: -7px;
      }

      .time-axis .left span.dot {
        /* 10 + 4 + 4 / 2 */
        right: -9px;
      }

      .time-axis .right span.dot {
        /* 10 + 4 + 4 / 2 */
        left: -9px;
      }

      .time-axis .arrow {
        height: 32px;
        width: 32px;
        display: block;
        position: absolute;
        top: 50%;
        margin-top: -16px;
      }

      .time-axis .right .arrow {
        background: url(./images/l-jiantou.png);
        left: 0;
      }

      .time-axis .left .arrow {
        background: url(./images/r-jiantou.png);
        right: 0;
      }

      .time-axis .box {
        /* height: 200px; */
        background-color: #fff;
        padding: 18px;
        border-radius: 10px;
        text-align: center;
      }

      .time-axis .left .box {
        margin-right: 23px;
      }

      .time-axis .right .box {
        margin-left: 23px;
      }

      .time-axis .box h3 {
        font-size: 0;
      }

      .time-axis .box h3 i {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 19px;
        color: #010101;
      }

      .time-axis .box h3 span {
        font-family: Arial;
        font-weight: bold;
        font-size: 52px;
        color: #b1bbf9;
      }

      .time-axis .box img {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <div class="time-axis clearFix">
      <div class="left">
        <span class="dot"></span>
        <span class="arrow"></span>
        <div class="box">
          <h3>
            <span>“</span>
            <i>春季腹泻要当心，益生菌要这样…</i>
            <span>”</span>
          </h3>
          <img src="./images/axis01.jpg" alt="axis01_image" />
        </div>
      </div>

      <div class="right">
        <span class="dot"></span>
        <span class="arrow"></span>
        <div class="box">
          <h3>
            <span>“</span>
            <i>春季腹泻要当心，益生菌要这样…</i>
            <span>”</span>
          </h3>
        </div>
      </div>

      <div class="left">
        <span class="dot"></span>
        <span class="arrow"></span>
        <div class="box">
          <h3>
            <span>“</span>
            <i>春季腹泻要当心，益生菌要这样…</i>
            <span>”</span>
          </h3>
        </div>
      </div>

      <div class="right">
        <span class="dot"></span>
        <span class="arrow"></span>
        <div class="box">
          <h3>
            <span>“</span>
            <i>春季腹泻要当心，益生菌要这样…</i>
            <span>”</span>
          </h3>
          <img src="./images/axis02.jpg" alt="axis01_image" />
        </div>
      </div>

      <div class="left">
        <span class="dot"></span>
        <span class="arrow"></span>
        <div class="box">
          <h3>
            <span>“</span>
            <i>春季腹泻要当心，益生菌要这样…</i>
            <span>”</span>
          </h3>
          <img src="./images/axis01.jpg" alt="axis01_image" />
        </div>
      </div>

      <div class="right">
        <span class="dot"></span>
        <span class="arrow"></span>
        <div class="box">
          <h3>
            <span>“</span>
            <i>春季腹泻要当心，益生菌要这样…</i>
            <span>”</span>
          </h3>
        </div>
      </div>

      <div class="left">
        <span class="dot"></span>
        <span class="arrow"></span>
        <div class="box">
          <h3>
            <span>“</span>
            <i>春季腹泻要当心，益生菌要这样…</i>
            <span>”</span>
          </h3>
        </div>
      </div>

      <div class="right">
        <span class="dot"></span>
        <span class="arrow"></span>
        <div class="box">
          <h3>
            <span>“</span>
            <i>春季腹泻要当心，益生菌要这样…</i>
            <span>”</span>
          </h3>
          <img src="./images/axis02.jpg" alt="axis01_image" />
        </div>
      </div>
    </div>
  </body>
</html>
